<template>
  <view class="telLogin">
    <view class="telLogin_image">
      <image src="@/static/img/login_logo.png" mode="widthFix"/>
    </view>
    <view class="telLogin_content">
      <view class="telLogin_content_box">
        <input v-model="account" type="text" :focus="true" class="telLogin_content_box_input" placeholder="请输入登录账号">
      </view>
    </view>
    <view class="telLogin_content">
      <view class="telLogin_content_box">
        <input v-model="password" type="text" :focus="true" :password="iconMark" class="telLogin_content_box_input" placeholder="请输入密码">
      </view>
      <view class="telLogin_content_getCode" v-on:click="changeIcon">
        <i class="show iconfont" :class="iconMark ? 'icon-yanjing_yincang' : 'icon-yanjing_xianshi'"></i>
      </view>
    </view>
    <view class="telLogin_btn">
      <button type="primary" class="telLogin_btn_submit" v-on:click="login">登录</button>
    </view>
    <view class="telLogin_type">
      <view class="telLogin_type_font">
        <view class="telLogin_type_font_part" >
        </view>
        <view class="telLogin_type_font_part" v-if="false">
          <font v-if="type == 'password'">忘记密码</font>
        </view>
      </view>
    </view>
    <view class="telLogin_foot">
      <view class="telLogin_foot_article">
        <view class="telLogin_foot_article_text">阅读</view>
        <view class="telLogin_foot_article_book" v-on:click="$navigateTo('/pages/system/privacy')">《隐私政策》</view>
        <view class="telLogin_foot_article_text">和</view>
        <view class="telLogin_foot_article_book" v-on:click="$navigateTo('/pages/system/serviceTreaty')">《服务协议》</view>
      </view>
      <view class="telLogin_foot_content">
        <view class="telLogin_foot_content_text">客服电话: 400-065-5799</view>
        <view class="telLogin_foot_content_text">工作时间: 9:30-18:30</view>
      </view>
    </view>
  </view>
</template>
<script>

export default {
  components: {},
  data() {
    return {
      needLogin: false,
      account: null,
      password: null,
      iconMark: true
    }
  },
  methods: {
    /**
     *密码显示替换Icon
     */
    changeIcon() {
      let self = this
      self.iconMark = self.iconMark == true ? false : true
    },
    /**
     * 登录
     */
    login() {
      let self = this
      if (!self.account) {
        uni.showToast({
          title: '请输入登录账号',
          icon: 'none'
        })
        return
      }
      if (!self.password) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        })
        return
      }
      self.$api.login({
        account: self.account,
        password: self.password,
      }, {
        loading: true
      }).then(res => {
        self.afterLogin(res)
        self.$isResolve()
      }).catch(res => {
        if (!res.data.res) {
          uni.showToast({
            title: '账号密码错误',
            icon: 'none'
          })
          return
        }
      })
    }
  }
}
</script>
<style>
page {
  background: #fff;
}
</style>
<style lang="scss" scoped>
.telLogin {
  .telLogin_top {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background-color: #00aaff;
    font-size: 20px;
  }

  .telLogin_image {
    padding-left: 20px;
    padding-top: 100px;
    padding-bottom: 80px;

    image {
      width: 200px;
    }
  }

  .telLogin_title {
    padding: 10px 20px 40px 20px;
    font-size: 22px;
    font-weight: bold;
  }

  .telLogin_content {
    display: flex;
    align-items: center;
    margin: 0px 20px 30px 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f6f6f6;
    height: 30px;
    font-size: 15px;

    .telLogin_content_addressTel {
      display: flex;
      align-items: end;
      justify-content: center;
      margin-right: 10px;
    }

    .telLogin_content_box {
      flex: 1;
      margin-right: 20px;

      &.password {
        margin-right: 10px;

        .telLogin_content_box_input {
          width: 100%;
          font-size: 15px !important;
        }
      }

      .telLogin_content_box_input {
        width: calc(100% - 40px);
        font-size: 15px !important;
      }
    }

    .telLogin_content_delete {
      width: 20px;

      .telLogin_content_delete_btn {
        color: #e5e5e5;
        background-color: #ffffff !important;

      }
    }

    .telLogin_content_getCode {
      width: 20px;
      margin-left: 10px;
      color: $font-hc;
    }
  }

  .telLogin_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;

    .telLogin_btn_submit {
      width: calc(100% - 40px);
      border-radius: 5px !important;
    }
  }

  .telLogin_type {
    width: calc(100% - 40px);
    padding: 0 20px;

    .telLogin_type_font {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .telLogin_type_font_part{
        font{
          color: #00aaff;
          font-size: 14px;
        }
      }
    }
  }

  .telLogin_foot {
    position: fixed;
    bottom: 50px;
    width: 100%;

    .telLogin_foot_article {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      margin-bottom: 5px;

      .telLogin_foot_article_text {
        margin-right: 5px;
      }

      .telLogin_foot_article_book {
        color: $primary;
      }
    }

    .telLogin_foot_content {
      font-size: 12px;

      .telLogin_foot_content_text {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 5px;
        margin-bottom: 5px;
      }
    }
  }
}
</style>
